<template>
  <div class="topbar">
    <div class="logo">
      <router-link to="/"><img :src="nav.company.logo" alt="logo"></router-link>
    </div>
    <div class="right-btns">
      <i @click="toggleSideMenu" class="iconfont icon-category"></i>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters([
        'nav'
      ])
    },
    methods: {
      toggleSideMenu () {
        this.$emit('toggle')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .topbar {
  	position: fixed;
  	left: 0;
  	top: 0;
  	z-index: 20;
  	right: 0;
  	width: 100%;
  	height: rem(110);
  	background: #333;
  	.logo {
  		position: absolute;
  		left: rem(30);
  		top: 50%;
  		transform: translate(0, -50%);
  		width: rem(328);
  		height: rem(49);
      overflow: hidden;
      img {
        width: 100%;
      }
  	}
  	.right-btns {
  		position: absolute;
  		right: 0;
  		width: rem(103);
  		height: rem(110);
  		display: flex;
  		justify-content: space-around;
  		align-items: center;
  		.iconfont {
  			width: rem(48);
  			height: rem(48);
  			color: #fff;
  			font-size: rem(48);
  			&:active， &.active {
  				color: #00dfb9;
  			}
  		}
  	}
  }
</style>
